<template>
	<div class="add">
		<div class="i_index_title">
			<span class="index_title">开奖信息</span>
			<van-icon class="fanhui" @click="fanhui" name="arrow-left" />
		</div>
		<div class="tab">
			<ul class="oul">
				<li v-for="(item,index) in date" @click="clic(index)" :style="{background:item.bgc,color:item.color}">
					{{item.name}}
				</li>
			</ul>
			<ul class="box">
				<li class="pic" v-show="indexClass==0">
					<div class="box_jix" v-for="(item,index) in shuangse">
						<div class="jix_title">
							<div class="title_name">第021006期开奖数据</div>
							<div class="title_time">2021/01/12</div>
						</div>
						<div class="jix_ball">
							<div class="ball_left">
								<div class="qiuqiu"><span>08</span></div>
								<div class="qiuqiu"><span>08</span></div>
								<div class="qiuqiu"><span>08</span></div>
								<div class="qiuqiu"><span>08</span></div>
								<div class="qiuqiu"><span>08</span></div>
								<div class="qiuqiu"><span>08</span></div>
								<div class="qiuqiu"><span>08</span></div>
							</div>
							<div class="ball_right"	v-show="!item.check" @click="item.check=true"><van-icon name="arrow-up" /></div>
							<div class="ball_right" v-show="item.check" @click="item.check=false"><van-icon name="arrow-down" /></div>
						</div>
						<div class="lottery" v-show="item.check">
							<div class="lottery_title">
								<div class="title_jd">奖等</div>
								<div class="title_zs">中奖注数</div>
								<div class="title_zj">单注中奖金额(元)</div>
							</div>
							<ul class="lottery_list">
								<li class="list_item">
									<div class="title_jd">一等奖</div>
									<div class="title_zs">17</div>
									<div class="title_zj">10,000,000</div>
								</li>
								<li class="list_item">
									<div class="title_jd">一等奖</div>
									<div class="title_zs">17</div>
									<div class="title_zj">10,000,000</div>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="pic" v-show="indexClass==1">
					<div class="box_jix" v-for="(item,index) in sand">
						
					</div>
				</li>
				<li class="pic" v-show="indexClass==2">
					<div class="box_jix" v-for="(item,index) in qicai">
						
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
				indexClass:0,
				date:[
					{
						name:'双色球',
						bgc:'#FFA9A9',
						color:'white'
					},
					{
						name:'福彩3D',
						bgc:'#BCDFFF',
						color:'#1591ED'
					},
					{
						name:'七彩乐',
						bgc:'#E5D3FF',
						color:'#9A61F7'
					}
				],
				shuangse:[
					{
						name:'机选1注',
						check:false,
					},
					{
						name:'机选2注',
						check:false,
					}
				],
				sand:[
					{
						name:'机选1注',
						check:false,
					},
					{
						name:'机选2注',
						check:false,
					}
				],
				qicai:[
					{
						name:'机选1注',
						check:false,
					},
					{
						name:'机选2注',
						check:false,
					}
				]
	    };
	  },
		methods:{
			clic(index){
				this.indexClass = index;
				// console.log(index)
			},
			fanhui(){
				this.$router.go(-1);
			},
		}
	};
</script>

<style scoped>
	*{margin: 0; padding: 0;}
	.i_index_title{
		width: 100%;
		height: 50px;
		background-color: #F74A4B;
		position: relative;
	}
	.tab{
		width: 95%;
		height: 450px;
		/* border: 1px solid red; */
		margin: 20px auto 0 ;
	}
	.oul{
		display: flex;
		height: 30px;
		margin: 0 auto;
	}
	.oul>li{
		margin-top: 0;
		height: 30px;
		flex: 1;
		text-align: center;
		line-height: 30px;
		border-radius: 30px;
		margin: 0 5px 0 5px;
	}
	.aa{
		display: none;
	}
	.pic{
		width: 100%;
		margin-top: 20px;
		display: block;
		background: white;
		border: 1px solid white;
	}
	.fanhui{
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		color: white;
		font-size: 30px;
	}
	.index_title{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.huakuai{
		width: 100%;
		height: 50px;
		background: white;
		position: fixed;
		display: flex;
		bottom: 0;
	}
	.multiple{
		flex: 1;
		margin-left: 20px;
		/* border: 1px solid red; */
	}
	.multiple>p{
		font-size: 20px;
	}
	.multiple>span{
		font-size: 10px;
		border: 1px solid black;
	}
	.quantity{
		flex: 3;
		/* border: 1px solid red; */
		font-size: 20px;
		line-height: 50px;
	}
	.quantity>span{
		font-size: 25px;
	}
	.notarize{
		width: 70px;
		height: 30px;
		margin-top: 10px;
		margin-right: 20px;
		background-color: red;
		color: white;
		border-radius: 50px;
		text-align: center;
		line-height: 30px;
	}
	.content_title{
		height: 50px;
		/* border: 1px solid red; */
	}
	.content_oul{
		max-height: 300px;
		/* border: 1px solid blue; */
		overflow: hidden;
		overflow: scroll;
	}
	.content_oul>li{
		height: 50px;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
	}
	.content_oli_ball{
		width: 30px;
		height: 30px;
		background-color: red;
		border-radius: 50%;
		color: white;
		text-align: center;
		line-height: 30px;
		margin-top: 10px;
		margin-left: 10px;
	}
	.box_jix{
		width: 93%;
		margin: 10px auto;
		position: relative;
	}
	.box_jix_check{
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translate(0,-50%);
	}
	.box_jix_p{
		position: absolute;
		top: 50%;
		left: 20px;
		transform: translate(0,-50%);
	}
	.jix_pji{
		font-size: 20px;
	}
	.jix_psj{
		font-size: 10px;
		color: #999999;
	}
	.jix_title{
		width: 95%;
		height: 50px;
		margin: 0 auto;
		display: flex;
		line-height: 50px;
	}
	.title_name{
		flex: 1;
		font-size: 15px;
	}
	.title_time{
		flex: 1;
		font-size: 13px;
		color: #999999;
	}
	.jix_ball{
		width: 95%;
		height: 50px;
		margin: 0 auto;
		position: relative;
	}
	.ball_right{
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translate(0,-50%);
	}
	.lottery{
		width: 95%;
		margin: 0 auto;
		font-size: 15px;
		border-top: 1px solid #F0F0F0;
	}
	.lottery_title{
		display: flex;
		height: 30px;
		line-height: 30px;
	}
	.lottery_title>div{
		text-align: center;
	}
	.list_item{
		display: flex;
		color: #666666;
		height: 30px;
		line-height: 30px;
	}
	.list_item>div{
		text-align: center;
	}
	.title_jd{
		flex: 1;
	}
	.title_zs{
		flex: 2;
	}
	.title_zj{
		flex: 3;
	}
	.ball_left{
		display: flex;
		padding-top: 10px;
	}
	.qiuqiu{
		margin-right: 5px;
		width: 30px;
		height: 30px;
		background-color: #F74A4B;
		border-radius: 50%;
		position: relative;
	}
	.qiuqiu>span{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
</style>
